function Browser(doc, client, ui, onerror_cb)
{
	this.element = doc.createElement("div");
	this.element.className = "browser";

	var inner = doc.createElement("span");	
	inner.innerText = "Waiting...";
	this.element.appendChild(inner);

    var pollinterval = -1;

    function makeGameDOM(game)
	{
		var div = doc.createElement('div');
		div.className = "browsergame";

        var gameid = game.gameid;

        var players = doc.createElement("div");
        players.className = "players";
        div.appendChild(players);

		function join(evt)
		{
            function onreply(reply){
                ui.addGame(reply.gameid);
            }
			client.command('joingame', {'gameid': gameid}, onreply, onerror_cb);
		}

		var joinLabel = (client.username) ? "Join game" : "Waiting for player";
        
        var redplayer = doc.createElement("span");
        redplayer.innerText =
			game.players[0].length == 0 ? joinLabel : game.players[0];
        redplayer.setAttribute("currentPlayer", (game.turn % 2 == 0) ? "true" : "false");
		redplayer.setAttribute("noplayer", game.players[0].length == 0 ? "true" : "false");

		if(game.players[0].length == 0 && client.username)
			redplayer.onclick = join;
                
        var versus = doc.createElement("span");
        versus.innerText = "vs.";
        
        var blueplayer = doc.createElement("span");
        blueplayer.innerText =
			game.players[1].length == 0 ? joinLabel : game.players[1];
        blueplayer.setAttribute("currentPlayer", (game.turn % 2 == 1) ? "true" : "false");
		blueplayer.setAttribute("noplayer", game.players[1].length == 0 ? "true" : "false");

		if(game.players[1].length == 0 && client.username)
			blueplayer.onclick = join;

        players.appendChild(redplayer);
        players.appendChild(versus);
        players.appendChild(blueplayer);
        
        var turndiv = doc.createElement("div");
		div.appendChild(turndiv);
        var turnlab = doc.createElement("span");
        turnlab.className = "label";
        turnlab.innerText = "Turn";
        var turnval = doc.createElement("span");
        turnval.className = "value";
        turnval.innerText = "" + game.turn;
        turndiv.appendChild(turnlab);
        turndiv.appendChild(turnval);

		var browseractions = doc.createElement("div");
		browseractions.className = "browseraction";
		div.appendChild(browseractions);
		var specbutton = doc.createElement("span");
		specbutton.innerText = "Spectate";
		specbutton.className = "browseraction";
		specbutton.onclick = function(evt) { ui.addGame(gameid); }
		browseractions.appendChild(specbutton);

		return div;
	}

	function makeAddGameDOM()
	{
		var div = doc.createElement("div");
		div.className = "addgame";
		div.innerText = "Welcome To WebHierarkia!";

		var sideselection = doc.createElement("div");
		div.appendChild(sideselection);
	
		var selectred = doc.createElement("span");
		selectred.className = "sideselect";
		selectred.id = "red";
		selectred.innerText = "Red";

		var selectblue = doc.createElement("span");
		selectblue.className = "sideselect";
		selectblue.id = "blue";
		selectblue.innerText = "Blue";

		sideselection.appendChild(selectred);
		sideselection.appendChild(selectblue);

		var addbutton = doc.createElement("div");
		div.appendChild(addbutton);
		addbutton.innerText = "Start new game!";

        function addgame(evt){
            function onreply(reply){
                ui.addGame(reply.gameid);
                ui.updateAllViews();
            }
            client.command('addgame', {color: 'red', info: {width:9, height:9, pieces: 6}}, //TODO: color & info
                                         onreply, onerror_cb);
        }
        addbutton.onclick = addgame;

		return div;		
	}

	function makeBrowserDOM(games)
	{
		var div = doc.createElement("div");
		if(client.username) div.appendChild(makeAddGameDOM());

		for(var i in games) div.appendChild(makeGameDOM(games[i]));
		return div;
	}

    var gameslist = [];

	var self = this;
	function updateBrowser()
	{
		self.element.removeChild(inner);
		inner = makeBrowserDOM(gameslist);
		self.element.appendChild(inner);
	}

	function poll(interval)
	{
		pollinterval = interval;

		function onreply(reply)
		{
			gameslist = reply.games;
			updateBrowser();
            if(pollinterval > 0)
				setTimeout(function() { poll(pollinterval); }, pollinterval);
		}

		client.command('getgames', '', onreply, onerror_cb);
	}


	this.start = function()
	{
		var interval = 5000; // TODO: configurable poll interval
		poll(interval);
	}

	this.stop = function()
	{
		pollinterval = -1;
	}

	this.onlogin = function(username) { updateBrowser(); }
	this.onlogout = function() { updateBrowser(); }
}

